$(document).ready(function() {
    addEmptyTest();
    dataSource = new kendo.data.DataSource({
        transport: {
            create: {
                url: appBosch.crud.create,
                dataType: "json"
            },
            read: {
                url: appBosch.crud.read,
                dataType: "json"
            },
            update: {
                url: appBosch.crud.update,
                dataType: "json"
            },
            destroy: {
                url: appBosch.crud.destroy,
                dataType: "json"
            },
            parameterMap: function(options, operation) {
                var params = {};
                switch (operation)
                {
                    case 'create':
                        params = {models: kendo.stringify(options.models)};
                        break;
                    case 'read':
                        break;
                    case 'update':
                        params = {models: kendo.stringify(options.models)};
                        break;
                    case 'destroy':
                        params = {id: options.models[0].id};
                        break;
                }
                return params;
            }
        },
        batch: true,
        schema: {
            model: {
                id: "id",
                fields: {
                    test_id: {
                        editable: true,
                        defaultValue: appBosch.tests[0].id
                    },
                    line_id: {
                        defaultValue: appBosch.lineId
                    },
                    name: {
                        editable: true,
                        nullable: false,
                        validation: {
                            required: true
                        }
                    },
                    certifications: {
                        editable: true,
                        nullable: false,
                        type: 'number',
                        validation: {
                            required: true
                        }
                    },
                    icon: {
                        editable: true,
                        nullable: false,
                        validation: {
                            required: true
                        }
                    },
                    colour: {
                        defaultValue: '#000000',
                        editable: true,
                        nullable: false,
                        validation: {
                            required: true
                        }
                    },
                    lower_limit: {
                        editable: true,
                        nullable: false,
                        type: 'number',
                        validation: {
                            required: true,
                            min: 0
                        }
                    },
                    upper_limit: {
                        editable: true,
                        nullable: false,
                        type: 'number',
                        validation: {
                            required: true,
                            max: 65535
                        }
                    },
                    requires_approval: {
                        editable: true,
                        nullable: false,
                        type: 'boolean'
                    }
                }
            }
        }
    });

    $("#grid").kendoGrid({
        scrollable: true,
        resizable: true,
        columnMenu: true,
        filterable: true,
        selectable: true,
        navigatable: true,
        sortable: true,
        dataSource: dataSource,
        toolbar: kendo.template($("#templateToolbar").html()),
        columns: [
            {
                field: "name",
                title: "Nivel",
                width: 200
            },
            {
                field: "test_id",
                title: "Curso requerido",
                values: appBosch.tests,
                width: 200
            },
            {
                field: "colour", 
                title: "Color", 
                editor: colorPickerEditor, 
                hidden: true
            },
            {
                field: "icon", 
                title: "Icono",
                template: "<i class='fa fa-2x #=icon#' style='color: #=colour#'></i>",
                width: 80
            },
            {
                field: "certifications", 
                title: "Certificaciones requeridas",
                width: 160,
                format: "n0",
                template: '#=kendo.toString(certifications, "n0")#'
            },
            {
                field: "lower_limit", 
                title: "Rango inferior",
                width: 160,
                format: "n0",
                template: '#=kendo.toString(lower_limit, "n0")# días'
            },
            {
                field: "requires_approval", 
                title: "Requiere aprobación",
                template: '#if(requires_approval === true){# <i class="fa fa-2x fa-check"></i>#}#',
                width: 180
            },
            {command: [
                    {
                        name: "edit",
                        text: {
                            edit: "",
                            update: "",
                            cancel: ""
                        }
                    },
                    {
                        name: "destroy",
                        text: ""
                    }], title: "&nbsp;"}],
        editable: {
            confirmation: "¿Estas seguro que deseas eliminar este nivel?",
            mode: "popup"
        }
    });
});

function preview(e) {
    $("#background").css("background-color", e.value);
}

function colorPickerEditor(container, options) {
    $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoColorPicker({
                value: "#ffffff",
                buttons: false,
                select: preview
            });
}

function addEmptyTest(){
    var emptyTest = {
        id: 0,
        value: 0,
        text: 'Ninguno',
        name: 'Ninguno'
    };
    appBosch.tests.unshift(emptyTest);
}